<template>
  <div class="container">
    <el-dialog
      :title="showTitle"
      :visible="dialogFormVisible"
      width="30%"
      @close="onCancel"
    >
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="学科名称" prop="name" label-width="100px">
          <el-input v-model="form.name" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item :label="form.isShow" prop="isShow" label-width="100px">
          <el-switch v-model="value" active-color="#13ce66"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AddSubjects, SubjectsUpdate } from '@/api/hmmm/subjects.js'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    editId: {
      type: [Number, String],
      default: null
    },
    row: {
      type: [Number, String, Object],
      default: null
    }
  },
  name: 'SubjectsAdd',
  components: {

  },
  computed: {
    showTitle () {
      return this.editId ? '修改学科' : '新增学科'
    }
  },
  data () {
    return {
      form: {
        name: '',
        isShow: '是否显示 '
      },
      rules: {
        name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        isShow: [{ required: true, message: '请选择是否显示', trigger: 'blur' }]

      },
      value: 1
    }
  },

  created () {

  },
  methods: {
    // 修改回写
    async SubjectsUpdate () {
      if (this.editId) {
        this.form.name = this.row.subjectName
        this.value = this.row.isFrontDisplay
      }
    },
    async onOk () {
      const rows = {
        id: this.editId, subjectName: this.form.name, isFrontDisplay: this.value
      }
      if (this.editId) {
        // console.log('this.editId', this.editId)
        // 编辑
        const { config } = await SubjectsUpdate(rows)
        this.form.name = config.data.subjectName
        this.value = config.data.isFrontDisplay
        this.$message({
          message: '修改成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
      } else {
      // 新增
        await AddSubjects({ subjectName: this.form.name, isFrontDisplay: this.value })
        // }
        this.$message({
          message: '添加成功 ',
          type: 'success',
          showClose: true,
          duration: 3000
        })
      }
      this.$emit('succeed')
      this.$emit('update:dialogFormVisible', false)
      // this.$refs.form
      // this.$refs.form.resetField
    },
    async onCancel () {
      this.$emit('update:dialogFormVisible', false)
      this.form = this.$options.data().form
      this.$refs.formRef.resetFields()
    }

  }
}
</script>

<style lang="less" scoped>
</style>
